<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    "
    v-if="loading"
  >
    <a-spin :spinning="loading"> </a-spin>
  </div>

  <template v-else>
    <table-structure
      v-if="isStruct"
      :categoryName="treeSelectedInfo?.categoryName"
      :tableInfo="importTableInfo"
    />

    <card v-else>
      <template #title>
        <div class="title-wrap">
          <span>{{ props?.treeSelectedInfo?.categoryName }}</span>
          <teleport to="#toolbar-right" defer v-if="isActivated">
            <div style="display: flex; align-items: center">
              <search />
              <div style="margin-left: 16px">
                <search-tag-drawer />
              </div>
            </div>
          </teleport>
        </div>
      </template>
      <template #more><publish-drawer /></template>
      <template #content>
        <a-table />
      </template>
    </card>
  </template>
</template>
<script setup>
import card from '@/components/card.vue'
import ATable from './table.vue'
import search from './search.vue'
import SearchTagDrawer from './search-tag-drawer.vue'
import PublishDrawer from './publish-drawer.vue'
import TableStructure from './table-structure.vue'
import { useProvideContextRegistry, useDbType } from './provide-context.js'
import { toRef, computed, onActivated, onDeactivated, watch, ref } from 'vue'
import { message as Message } from 'ant-design-vue'
import useActivated from '@/hooks/useActivated.js'
import { getFileInfo } from '@/api/db.js'

/**
 * 外部参数
 */
let props = defineProps({
  groupId: { type: String },
  treeSelectedInfo: { type: Object },
  staticPermission: {
    type: Object,
  },
})

let isActivated = useActivated()

// /**
//  * 事件定义
//  */
// let emit = defineEmits(['update:groupId'])
// /**
//  * 双向绑定
//  */
// let groupId = useVModel(props, 'groupId', emit)
let groupId = toRef(props, 'groupId')
let treeSelectedInfo = toRef(props, 'treeSelectedInfo')
// let categoryName = computed(() => treeSelectedInfo.value?.categoryName)
useProvideContextRegistry({
  groupId,
  categoryId: groupId,
  treeSelectedInfo,
  useSearchQueryDataname: true,
  staticPermission: props.staticPermission,
})

/**
 * 获取是否是结构化数据
 */
let dbType = useDbType()
let isStruct = ref(false)
let importTableInfo = ref({})
let loading = ref(false)
watch(groupId, async parentId => {
  loading.value = true
  try {
    let { data } =
      (await getFileInfo(
        { parentId, pageNum: 1, pageSize: 10, keyword: '' },
        dbType,
      )) || {}
    let { struct, importTableInfoVO } = data
    isStruct.value = struct
    importTableInfo.value = importTableInfoVO
  } catch (e) {
    Message.error(`是否是结构化数据查询失败![${e.message}]`)
  }
  loading.value = false
})
</script>
<style scoped lang="less">
.title-wrap {
  display: flex;
  white-space: nowrap;
  align-items: center;
  span {
    margin-right: 12px;
  }
}
</style>
